<template>
   <uv-index-list :indexList="indexList" @select="onSelect">
      <template v-slot:header>
         <view class="list">
            <view class="list__item">
               <uv-avatar
                  shape="square"
                  size="35"
                  icon="weixin-fill"
                  fontSize="26"
                  randomBgColor
               ></uv-avatar>
               <text class="list__item__user-name">新的朋友</text>
            </view>
            <uv-line></uv-line>
            <view class="list__item">
               <uv-avatar
                  shape="square"
                  size="35"
                  icon="tags-fill"
                  fontSize="26"
                  randomBgColor
               ></uv-avatar>
               <text class="list__item__user-name">标签</text>
            </view>
            <uv-line></uv-line>
            <view class="list__item">
               <uv-avatar
                  shape="square"
                  size="35"
                  icon="moments-circel-fill"
                  fontSize="26"
                  randomBgColor
               ></uv-avatar>
               <text class="list__item__user-name">朋友圈</text>
            </view>
            <uv-line></uv-line>
            <view class="list__item">
               <uv-avatar
                  shape="square"
                  size="35"
                  icon="qq-fill"
                  fontSize="26"
                  randomBgColor
               ></uv-avatar>
               <text class="list__item__user-name">QQ</text>
            </view>
            <uv-line></uv-line>
         </view>
      </template>

      <!-- #ifdef VUE3 -->
      <template v-for="(item, index) in itemArr" :key="index">
         <!-- #endif -->
         <!-- #ifdef APP-NVUE -->
         <uv-index-anchor :text="indexList[index]"></uv-index-anchor>
         <!-- #endif -->
         <uv-index-item>
            <!-- #ifndef APP-NVUE -->
            <uv-index-anchor :text="indexList[index]"></uv-index-anchor>
            <!-- #endif -->
            <view class="list" v-for="(item1, index1) in item" :key="index1">
               <view class="list__item">
                  <image class="list__item__avatar" :src="item1.url"></image>
                  <text class="list__item__user-name">{{ item1.name }}</text>
               </view>
               <uv-line></uv-line>
            </view>
         </uv-index-item>
      </template>
      <template v-slot:footer>
         <view class="uv-safe-area-inset--bottom">
            <view class="list__footer">共305位好友</view>
         </view>
      </template>
   </uv-index-list>
</template>

<script lang="ts" setup>
import { computed } from 'vue';

// 生成索引列表
const indexList = (() => {
   const indexList: string[] = [];
   const charCodeOfA = 'A'.charCodeAt(0);
   indexList.push('↑');
   indexList.push('☆');
   for (let i = 0; i < 26; i++) {
      indexList.push(String.fromCharCode(charCodeOfA + i));
   }
   indexList.push('#');
   return indexList;
})();

// 图片URLs
const urls = [
   'https://cdn.uviewui.com/uview/album/1.jpg',
   'https://cdn.uviewui.com/uview/album/2.jpg',
   'https://cdn.uviewui.com/uview/album/3.jpg',
   'https://cdn.uviewui.com/uview/album/4.jpg',
   'https://cdn.uviewui.com/uview/album/5.jpg',
   'https://cdn.uviewui.com/uview/album/6.jpg',
   'https://cdn.uviewui.com/uview/album/7.jpg',
   'https://cdn.uviewui.com/uview/album/8.jpg',
   'https://cdn.uviewui.com/uview/album/9.jpg',
   'https://cdn.uviewui.com/uview/album/10.jpg',
];

// 名字列表
const names = [
   '勇往无敌',
   '疯狂的迪飙',
   '磊爱可',
   '梦幻梦幻梦',
   '枫中飘瓢',
   '飞翔天使',
   '曾经第一',
   '追风幻影族长',
   '麦小姐',
   '胡格罗雅',
   'Red磊磊',
   '乐乐立立',
   '青龙爆风',
   '跑跑卡叮车',
   '山里狼',
   'supersonic超',
];

// 计算属性：生成每个索引对应的数据
const itemArr = computed(() => {
   return indexList.map(item => {
      const arr = [];
      for (let i = 0; i < 10; i++) {
         arr.push({
            name: names[uni.$uv.random(0, names.length - 1)],
            url: urls[uni.$uv.random(0, urls.length - 1)],
         });
      }
      return arr;
   });
});

// 方法
const onSelect = (index: number) => {
   console.log('选中索引:', index, '对应字母:', indexList[index]);
};
</script>

<style lang="scss" scoped>
@use '../../../common/demo.scss';
.list {
   &__item {
      @include flex;
      padding: 6px 12px;
      align-items: center;

      &__avatar {
         height: 35px;
         width: 35px;
         border-radius: 3px;
      }

      &__user-name {
         font-size: 16px;
         margin-left: 10px;
         color: $uv-main-color;
      }
   }

   &__footer {
      color: $uv-tips-color;
      font-size: 14px;
      text-align: center;
      margin: 15px 0;
   }
}
</style>
